
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <meta charset="UTF-8">
    <title>借阅管理</title>
    <link rel="stylesheet" href="../../js/layui/css/layui.css">
    <script src="../../js/jquery-3.4.1.js"></script>
    <script src="../../js/layui/layui.all.js"></script>
    <style>
        body {
            font-family: 'Arial', sans-serif;
            background-color: #f8f9fa;
            color: #343a40;
            margin: 0;
            padding: 0;
        }

        .container {
            display: flex;
            margin: 30px auto;
            padding: 20px;
            max-width: 1200px;
            background-color: #fff;
            border-radius: 10px;
            box-shadow: 0 0 15px rgba(0, 0, 0, 0.1);
        }

        .left-section {
            flex: 70%;
            margin-right: 20px;
        }

        .right-section {
            flex: 30%;
        }

        .search-container {
            margin-bottom: 20px;
            display: flex;
            align-items: center;
        }

        .search-container input {
            flex: 1;
            padding: 10px;
            border-radius: 5px;
            border: 1px solid #ced4da;
            margin-right: 10px;
        }

        .search-container button {
            margin-left: 15px;
            padding: 10px 20px;
            border: none;
            background-color: #007bff;
            color: #fff;
            border-radius: 5px;
            cursor: pointer;
            transition: background-color 0.3s;

        }

        .search-container button:hover {
            background-color: #0056b3;
        }

        table {
            width: 100%;
            border-collapse: collapse;
        }

        table th, table td {
            border: 1px solid #ddd;
            padding: 8px;
            text-align: left;
            white-space: nowrap; /* 禁止自动换行 */
            overflow: hidden;    /* 超出部分隐藏 */
            text-overflow: ellipsis; /* 超出部分用省略号表示 */
            max-width: 150px; /* 根据需要调整列宽 */
        }

        table th {
            background-color: #007bff;
            color: #fff;
        }

        table tr:hover {
            background-color: #f1f1f1;
        }

        #pagination {
            display: flex;
            justify-content: center;
            margin-top: 20px;
        }

        .layui-laypage a, .layui-laypage span {
            color: #007bff;
        }

        .hot-books-container {
            background-color: #f8f9fa;
            padding: 15px;
            border-radius: 10px;
        }

        .hot-books-container h3 {
            margin-bottom: 20px;
            font-size: 24px;
            color: #007bff;
            text-align: center;
        }

        .book-card {
            display: flex;
            flex-direction: column;
            padding: 10px;
            border: 1px solid #e6e6e6;
            border-radius: 10px;
            background-color: #fff;
            margin-bottom: 15px;
            transition: transform 0.3s;
        }

        .book-card:hover {
            transform: scale(1.02);
        }

        .book-card h4 {
            margin-bottom: 5px;
            font-size: 18px;
            color: #343a40;
        }

        .book-card p {
            margin-bottom: 5px;
            color: #6c757d;
        }

        .table-container {
            max-height: 500px; /* 固定高度，可以根据需要调整 */
            overflow-y: auto; /* 当内容超过固定高度时出现垂直滚动条 */
            border: 1px solid #ddd; /* 边框 */
        }
        body {
            background-color: #FFF5E1; /* Light peach background */
            color: #6B4226; /* Dark brown text */
        }
        table {
            width: 100%;
            border-collapse: collapse;
        }
        th {
            background-color: #FFD700; /* Warm yellow header background */
            color: #6B4226; /* Dark brown text */
            padding: 10px;
        }
        td {
            background-color: #FFF8DC; /* Light warm background for table cells */
            color: #6B4226; /* Dark brown text */
            padding: 10px;
            border: 1px solid #D2B48C; /* Tan borders */
        }
        a {
            color: #D2691E; /* Warm brown link color */
        }
        button {
            background-color: #FFB347; /* Warm orange button background */
            color: #FFFFFF; /* White text on buttons */
            border: none;
            padding: 10px 20px;
            border-radius: 5px;
        }
        button:hover {
            background-color: #FF7F50; /* Slightly darker orange on hover */
        }
    </style>
</head>

<body>

<div class="container">
    <div class="left-section">
        <div class="search-container">
            <label>
                <input type="text" name="searchTitle" id="searchTitle" placeholder="请输入书籍标题" autocomplete="off"
                       class="layui-input">
            </label>
            <button type="button" id="searchBtn">搜索</button>
        </div>
        <div class="table-container">
            <table class="layui-table" id="bookTable">
                <thead>
                <tr>
                    <th>标题</th>
                    <th>作者</th>
                    <th>ISBN</th>
                    <th>出版社</th>
                    <th>出版日期</th>
                    <th>库存量</th>
                    <th>类型</th>
                    <th>介绍</th>
                </tr>
                </thead>
                <tbody>
                <!-- 动态加载书籍信息 -->
                </tbody>
            </table>
        </div>

        <div id="pagination" class="layui-box layui-laypage layui-laypage-default"></div>
    </div>
    <div class="right-section">
        <div class="hot-books-container">
            <h3>热门书籍</h3>
            <div id="hotBooks">
                <!-- 动态加载热门书籍 -->
            </div>
        </div>
    </div>
</div>

<script>
    layui.use(['table', 'laypage', 'layer'], function () {
        const table = layui.table;
        const laypage = layui.laypage;
        const layer = layui.layer;
        const limit = 5
        let page = 1


        /**
         * 给表格赋值
         * @param data 书籍数据
         */
        function renderTable(data) {
            let tbody = $('#bookTable tbody');
            tbody.empty();
            data.forEach(function (book) {
                let tr = $('<tr>');
                tr.append('<td><a href="javascript:;" class="book-title" target="view_frame" data-id="' + book.book_id + '">' + book.title + '</a></td>');
                tr.append('<td>' + book.author + '</td>');
                tr.append('<td>' + book.isbn + '</td>');
                tr.append('<td>' + book.publisher + '</td>');
                tr.append('<td>' + book.publish_date + '</td>');
                tr.append('<td>' + book.stock_quantity + '</td>');
                tr.append('<td>' + book.type + '</td>');
                tr.append('<td><a href="javascript:;" class="book-introduce" data-introduce="' + book.introduce + '">点击查看</a></td>');
                tbody.append(tr);
            });
        }

        /**
         * 渲染分页条
         * @param total 总数
         * @param curr  当前页数
         */
        function renderPagination(total, curr) {
            laypage.render({
                elem: 'pagination',
                count: total,
                curr: curr,
                limit: limit,
                jump: function (obj, first) {
                    if (!first) {
                        loadPageData(obj.curr);
                    }
                }
            });
        }

        /**
         * 加载表格数据
         * @param page
         */
        function loadPageData(page) {
            let title = $('#searchTitle').val();
            $.ajax({
                url: '${pageContext.request.contextPath}/allBook',
                method: 'GET',
                data: {
                    title: title,
                    page: page,
                    limit: limit
                },
                success: function (res) {
                    const dataObj = JSON.parse(JSON.stringify(res));
                    renderTable(dataObj.data);
                    renderPagination(dataObj.count, page);
                },
                error: function () {
                    console.log('数据库响应失败');
                }
            });
        }

        /**
         * 加载热门书籍
         */
        function loadHotBooks() {
            $.ajax({
                url: '${pageContext.request.contextPath}/getTopBorrowedBooks',
                method: 'POST',
                success: function (res) {
                    const dataObj = JSON.parse(JSON.stringify(res));
                    renderHotBooks(dataObj.data);
                },
                error: function () {
                    console.log('数据库响应失败');
                }
            });
        }

        /**
         * 渲染热门书籍
         */
        function renderHotBooks(data) {
            let hotBooksContainer = $('#hotBooks');
            data.forEach(function (book) {
                var bookCard = $('<div class="book-card">');
                bookCard.append('<h4>' + book.title + '</h4>');
                bookCard.append('<p>作者: ' + book.author + '</p>');
                bookCard.append('<p>ISBN: ' + book.isbn + '</p>');
                bookCard.append('<p>出版社: ' + book.publisher + '</p>');
                bookCard.append('<p>出版日期: ' + book.publishDate + '</p>');
                bookCard.append('<p>类型: ' + book.type + '</p>');
                hotBooksContainer.append(bookCard);
            });
        }

        /**
         * 渲染书籍表格
         */
        $(document).ready(function () {
            loadPageData(page);
            loadHotBooks();

            /**
             * 搜索按钮点击事件
             */
            $('#searchBtn').click(function () {
                let title = $('#searchTitle').val();
                // layui.layer.msg('搜索框不能为空!', { icon: 2 });
                loadPageData(1);
            });

            /**
             * 书籍title列点击事件
             */
            $('#bookTable').on('click', '.book-title', function () {
                let bookId = $(this).data('id');
                parent.document.getElementById('view_frame').src = './page/public/bookDetail.jsp?bookId=' + bookId;
            })

            /**
             * 书籍详情列点击事件
             */
            $('#bookTable').on('click', '.book-introduce', function () {
                let introduce = $(this).data('introduce');
                layer.open({
                    title: '书籍介绍',
                    content: introduce
                });
            });
        });
    });

</script>
</body>


</html>
